<template>
    <div>
        <table class="table caption-top  table-hover">
            <caption>
                <span class="h5 text-dark">已使用的教室座位使用率</span>
            </caption>
            <thead>
                <tr>
                    <th scope="col">教室ID</th>
                    <th scope="col">教室名称</th>
                    <th scope="col">所属楼栋</th>
                    <th scope="col">使用人数</th>
                    <th scope="col">教室容量</th>
                    <th scope="col">使用率</th>
                </tr>
            </thead>
            <tbody>
                <Item2  v-for="roomusagerate in roomusagerates" :key="roomusagerate.classroom_id" :roomusagerate="roomusagerate" v-on:reloadTable="updaterateTable"/>
            </tbody>
        </table>
        <table class="table caption-top  table-hover">
            <caption>
                <span class="h5 text-dark">教室使用情况管理</span>
                <span class="col-3">
                    <el-button type="warning" icon="el-icon-plus" circle @click="centerDialogVisible = true"></el-button>
                    <!-- <el-button type="text" >点击打开 Dialog</el-button> -->
        
                    <el-dialog
                    title="教室使用情况添加"
                    :visible.sync="centerDialogVisible"
                    width="35%"
                    center>
                        <div class="text-center">
                            教室名称:
                            <el-select v-model="newroomusage2.classroomName" class="w-50"  placeholder="请选择" @change="handleClassRoomSelectChange">
                                <el-option
                                v-for="item in roomusagerlists.classrooms"
                                :key="item.classroomId"
                                :label="item.classroomName"
                                :value="item">
                                </el-option>
                            </el-select>

                            <!-- <el-input v-model="newroomusage.classroomId" class="w-50" placeholder="请输入教室ID"></el-input> -->
                        </div>
                        <div class="mt-1 text-center">
                            课程名称:
                            <el-select v-model="newroomusage2.courseName" class="w-50"  placeholder="请选择" @change="handleClassCourseSelectChange">
                                <el-option
                                v-for="item in roomusagerlists.courses"
                                :key="item.courseId"
                                :label="item.courseName"
                                :value="item">
                                </el-option>
                            </el-select>

                            <!-- <el-input v-model="newroomusage.courseId" class="w-50" placeholder="请输入课程ID"></el-input> -->
                        </div>
                        <div class="mt-1 text-center">
                            班级名称:
                            <el-select v-model="newroomusage2.className" class="w-50"  placeholder="请选择" @change="handleClassSelectChange">
                                <el-option
                                v-for="item in roomusagerlists.classInformations"
                                :key="item.classId"
                                :label="item.className"
                                :value="item">
                                </el-option>
                            </el-select>
                            <!-- <el-input v-model.number="newroomusage.classId" class="w-50" placeholder="请输入班级ID" type="text"></el-input> -->
                        </div>
                        <div class="mt-1 text-center">
                            教师名称:
                            <el-select v-model="newroomusage2.name" class="w-50"  placeholder="请选择" @change="handleUsersSelectChange">
                                <el-option
                                v-for="item in roomusagerlists.users"
                                :key="item.id"
                                :label="item.name"
                                :value="item">
                                </el-option>
                            </el-select>
                            <!-- <el-input v-model="newroomusage.teacherId" class="w-50" placeholder="请输入教师ID"></el-input> -->
                        </div>
                        <div class="mt-1 text-center">
                            教室状态:
                            <!-- <el-input v-model="newroomusage.classroomStatus" class="w-50" placeholder="请输入教室状态" type="text"></el-input> -->
                            <el-select v-model="newroomusage2.classroomStatus" class="w-50"  placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="mt-1 text-center">
                            使用时间:
                            <!-- <el-input v-model.number="newroomusage.usageTime" class="w-50" placeholder="请输入教室使用时间" type="text"></el-input> -->
                            <el-date-picker class="w-50"
                                v-model="newroomusage2.usageTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                format = "yyyy-MM-dd HH:mm:ss"
                                value-format = "yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addusage2">添加</el-button>
                        </span>
                    </el-dialog>
                <!-- <el-button type="warning" icon="el-icon-plus" circle @click="addusage"></el-button> -->
                </span>
            </caption>
            <thead>
                <tr>
                    <th scope="col">教室名称</th>
                    <th scope="col">课程名称</th>
                    <th scope="col">班级名称</th>
                    <th scope="col">用户名称(教师)</th>
                    <th scope="col">教室状态</th>
                    <th scope="col">使用时间</th>
                </tr>
            </thead>
            <tbody>
                <Item3  v-for="roomusage2 in roomusagerlists.data" :key="roomusage2.classroom_id" 
                :roomusage2="roomusage2" 
                :classInformations="roomusagerlists.classInformations" 
                :courses="roomusagerlists.courses" 
                :classrooms="roomusagerlists.classrooms" 
                :users="roomusagerlists.users" 
                v-on:reloadTable="updateTable"/>
            </tbody>
        </table>
        <table class="table caption-top  table-hover">
            <caption>
                <span class="h5 text-dark">教室使用情况表</span>
                <span class="col-3">
                    
                    <el-button type="warning" icon="el-icon-plus" circle @click="centerDialogVisible2 = true"></el-button>
                    <!-- <el-button type="text" >点击打开 Dialog</el-button> -->
        
                    <el-dialog
                    title="添加教室使用情况"
                    :visible.sync="centerDialogVisible2"
                    width="35%"
                    center>
                        <div class="text-center">
                            教室ID:
                            <el-input v-model="newroomusage.classroomId" class="w-50" placeholder="请输入教室ID"></el-input>
                        </div>
                        <div class="mt-1 text-center">
                            课程ID:
                            <el-input v-model="newroomusage.courseId" class="w-50" placeholder="请输入课程ID"></el-input>
                        </div>
                        <div class="mt-1 text-center">
                            班级ID:
                            <el-input v-model.number="newroomusage.classId" class="w-50" placeholder="请输入班级ID" type="text"></el-input>
                        </div>
                        <div class="mt-1 text-center">
                            教师ID:
                            <el-input v-model="newroomusage.teacherId" class="w-50" placeholder="请输入教师ID"></el-input>
                        </div>
                        <div class="mt-1 text-center">
                            教室状态:
                            <!-- <el-input v-model="newroomusage.classroomStatus" class="w-50" placeholder="请输入教室状态" type="text"></el-input> -->
                            <el-select v-model="newroomusage.classroomStatus" class="w-50"  placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="mt-1 text-center">
                            使用时间:
                            <!-- <el-input v-model.number="newroomusage.usageTime" class="w-50" placeholder="请输入教室使用时间" type="text"></el-input> -->
                            <el-date-picker class="w-50"
                                v-model="newroomusage.usageTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                format = "yyyy-MM-dd HH:mm:ss"
                                value-format = "yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addusage">添加</el-button>
                        </span>
                    </el-dialog>
                <!-- <el-button type="warning" icon="el-icon-plus" circle @click="addusage"></el-button> -->
                </span>
            </caption>
            <thead>
                <tr>
                    <th scope="col">教室ID</th>
                    <th scope="col">课程ID</th>
                    <th scope="col">班级ID</th>
                    <th scope="col">教师ID</th>
                    <th scope="col">教室状态</th>
                    <th scope="col">教室使用时间</th>
                </tr>
            </thead>
            <tbody>
                <Item  v-for="roomusage in roomusages" :key="roomusage.id" :roomusage="roomusage" v-on:reloadTable="updateTable"/>
            </tbody>
        </table>
        <el-pagination
            v-show="!isSearched"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[2,5,6]"
            :page-size="2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
      <VNode/>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  import RoomUsageItem from "./RoomUsageItem.vue"
  import RoomUsageItem2 from "./RoomUsageItem2.vue"
  import RoomUsageItem3 from "./RoomUsageItem3.vue"
  // import VNode from "./VNode"
  export default {
      name:'RoomUsageTable',
      components:{
        "Item" : RoomUsageItem,
        "Item2" : RoomUsageItem2,
        "Item3" : RoomUsageItem3
      },
      data() {
          return {
              centerDialogVisible: false,
              centerDialogVisible2: false,
              roomusages:[],
              roomusagerates:[],
              roomusagerlists:[],
              page:1,
              count: 0,
              number_per_page:2,
              newroomusage:{},
              newroomusage2:{},
              options: [{
                value: '空闲中',
                label: '空闲中'
                }, {
                value: '使用中',
                label: '使用中'
                }],
              searchName: "",
              
              isSearched:false,
          }
      },
      methods: {
        handleClassRoomSelectChange(item) {
            this.newroomusage2.classroomId = item.classroomId;
            this.newroomusage2.classroomName = item.classroomName;
        },
        handleClassSelectChange(item) {
            this.newroomusage2.classId = item.classId;
            this.newroomusage2.className = item.className;
        },
        handleClassCourseSelectChange(item) {
            this.newroomusage2.courseId = item.courseId;
            this.newroomusage2.courseName = item.courseName;
        },
        handleUsersSelectChange(item) {
            this.newroomusage2.teacherId = item.id;
            this.newroomusage2.name = item.name;
        },
        handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
              this.number_per_page = val;
              axios({
                url: "http://localhost:8080/classroom_Usage/classroomUsages",
                method: "POST", 
                data: {
                    page: this.page,
                    number_per_page: this.number_per_page
                }
              }).then(res => {
              this.roomusages=res.data
             })
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val
            axios({
                url: "http://localhost:8080/classroom_Usage/classroomUsages",
                method: "POST", 
                data: {
                    page: this.page,
                    number_per_page: this.number_per_page
                }
            }).then(res => {
              this.roomusages=res.data
             })
  
        },
        nextPage() {
            if(this.page*5>=this.count){
                this.$alert('没有下一页啦', '温馨提示', {
                confirmButtonText: '知道啦',
                });
            }
            else{
                this.page+=1;
                axios.get('http://localhost:8080/classroom_Usage/classroomUsages'+this.page).then(
                    response => {
                        this.roomusages=response.data;
                    },
                    error =>{
                        console.log(error.massage);
                    }
                )
            }
              
          },
          lastPage(){
              if(this.page===1){
                  this.$alert('这已经是第一页啦', '温馨提示', {
                  confirmButtonText: '知道啦',
                  });
              }
              else{
                  this.page-=1;
                  axios.get('http://localhost:8080/classroom_Usage/classroomUsages/'+this.page).then(
                  response => {
                      this.roomusages=response.data;
                  },
                  error =>{
                      console.log(error.massage);
                  }
              )
              }
          },
        async  addusage(){
              if (this.newroomusage.classroomId==""||this.newroomusage.courseId==""||this.newroomusage.classId===""||this.newroomusage.teacherId ===""||this.newroomusage.classroomStatus==="") {
                  this.$alert('所有内容均不可为空哦！', '温馨提示', {
                   confirmButtonText: '知道啦',
                  });
              }else{
                 await axios({
                      url:"http://localhost:8080/classroom_Usage/add",
                      method:"POST",
                      data:this.newroomusage
                  });
                  this.$message({
                  type: 'success',
                  message: '添加成功!'
              });
                  this.centerDialogVisible=false;
               await  axios.get('http://localhost:8080/classroom_Usage/get_ClassroomUsages_Count').then(
               response => {
                      this.count=parseInt(response.data);
                  },
                  error =>{
                      console.log(error.massage);
                  })
                 await this.updateTable();
              }
          },
          async  addusage2(){
              if (this.checkEmptyValues(this.newroomusage2)) {
                  this.$alert('所有内容均不可为空哦！', '温馨提示', {
                   confirmButtonText: '知道啦',
                  });
              }else{
                 await axios({
                      url:"http://localhost:8080/classroom_Usage/add",
                      method:"POST",
                      data:this.newroomusage2
                  });
                  this.$message({
                  type: 'success',
                  message: '添加成功!'
              });
                  this.centerDialogVisible=false;
               await  axios.get('http://localhost:8080/classroom_Usage/get_ClassroomUsages_Count').then(
               response => {
                      this.count=parseInt(response.data);
                  },
                  error =>{
                      console.log(error.massage);
                  })
                 await this.updateTable3();
              }
          },
          searchusage(){
              
              // alert('http://localhost:8080/search?name='+this.searchName+"&")
              if (this.searchName==="") {
                  this.$alert("查询内容不能为空！","温馨提示",{
                      confirmButtonText: '知道啦'
                  })
              }
              else{
                  axios({
                      url:"http://localhost:8080/classroom_Usage/search",
                      method:"POST",
                      data:{
                          name:this.searchName,
                      }
                  }).then(
                      response => {
                          console.log(response.data);
                          // this.roomusages=response.data.roomusages;
                          this.roomusages=response.data;
                          // alert(this.count);
                      },
                      error =>{
                          console.log(error.massage);
                      }
                  )
                  
                  this.isSearched=true;
              }
          },
         backBeforeSearch(){
              this.searchName=""
              // axios.get('http://localhost:8080/roomusages/'+this.page).then(
              //     response => {
              //         console.log(response.data);
              //         // this.roomusages=response.data.roomusages;
              //         this.roomusages=response.data;
              //     },
              //     error =>{
              //         console.log(error.massage);
              //     }
              // );
              this.updateTable()
              this.isSearched=false;
          },
        async  updateTable() {
              // alert("表格更新")
            axios({
                url: "http://localhost:8080/classroom_Usage/classroomUsages/",
                method: "POST", 
                data: {
                    page: this.page,
                    number_per_page: this.number_per_page
                }
          }).then(res => {
              this.roomusages=res.data;
             })
          axios.get('http://localhost:8080/classroom_Usage/get_ClassroomUsages_Count/').then(
               response => {
                      this.count=parseInt(response.data);
                  },
                  error =>{
                      console.log(error.massage);
                  }
          )
          },
          async  updaterateTable() {
            axios.get('http://localhost:8080/classroom_Usage/get_classroom_usage_rate').then(
                response => {
                        this.roomusagerates=response.data;
                    },
                    error =>{
                        console.log(error.massage);
                    }
            )
          },
          async  updateTable3() {
            axios.get('http://localhost:8080/classroom_Usage/get_usage_list_data').then(
                response => {
                        this.roomusagerlists=response.data;
                    },
                    error =>{
                        console.log(error.massage);
                    }
            )
          },
          checkEmptyValues(obj) {
            if(obj =={}){
                return false;
            }
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                if (!obj[key]) {
                    return true;
                }
                }
            }
            
            return false;
        },
  
      },
      mounted() {
            axios({
                url: "http://localhost:8080/classroom_Usage/classroomUsages/",
                method: "POST", 
                data: {
                    page: this.page,
                    number_per_page: this.number_per_page
                }
            }).then(res => {
                this.roomusages=res.data;
                console.log(this.roomusages);
                
                })
            axios.get('http://localhost:8080/classroom_Usage/get_ClassroomUsages_Count/').then(
                response => {
                        this.count=parseInt(response.data);
                    },
                    error =>{
                        console.log(error.massage);
                    }
            )
            axios.get('http://localhost:8080/classroom_Usage/get_classroom_usage_rate').then(
                response => {
                        this.roomusagerates=response.data;
                    },
                    error =>{
                        console.log(error.massage);
                    }
            )
            axios.get('http://localhost:8080/classroom_Usage/get_usage_list_data').then(
                response => {
                        
                        this.roomusagerlists = response.data;

                        // this.roomusagerlists= response;
                        console.log("roomusagerlists.data ：" + this.roomusagerlists.data);
                        console.log(this.roomusagerlists.data);
                        console.log(this.roomusagerlists.data[0].classroom_id);
                    },
                    error =>{
                        console.log(error.massage);
                    }
            )
      }
  }
  </script>
  
  <style scoped>
  
  </style>